<template>
	<!-- 顶部导航 -->
	<div style="background: #333">
		<section class="headnav-box">
			<el-menu style="width: 50%" class="el-menu-demo" mode="horizontal" text-color="#b0b0b0"
				background-color="#333" @select="handleSelect">
				<el-menu-item index="1" v-if="!this.$store.state.user.isLogin">
					<router-link to="/login" style="text-decoration: none">
						亲,请登录
					</router-link>
				</el-menu-item>
				<el-menu-item index="1" v-if="this.$store.state.user.isLogin">
					欢迎你 {{ username }}
				</el-menu-item>
				<el-menu-item index="2" v-if="!this.$store.state.user.isLogin">
					<router-link :to="{ path: '/login', query: { data: 0 } }" style="text-decoration: none">
						免费注册
					</router-link>
				</el-menu-item>
				<el-menu-item index="3">手机逛小米</el-menu-item>
			</el-menu>
			<el-menu class="el-menu-demo" mode="horizontal" text-color="#b0b0b0" background-color="#333"
				style="width: 50%; display: flex; justify-content: right">
				<el-menu-item index="4" class="right-menu">
					<router-link to="/" style="text-decoration: none">小米商城官网</router-link>
				</el-menu-item>

				<el-menu-item index="6">
					<router-link to="/cart" style="text-decoration: none">
						购物车
					</router-link>
				</el-menu-item>
				<el-menu-item index="7">收藏夹</el-menu-item>
				<el-menu-item index="8">商品分类</el-menu-item>
				<el-menu-item index="9">卖家中心</el-menu-item>
				<el-menu-item index="10">联系客服</el-menu-item>
				<el-menu-item index="11">网站导航</el-menu-item>
				<el-sub-menu index="5">
					<template #title>个人中心</template>
					<el-menu-item inde="1-2" @click="updatePwd">修改密码</el-menu-item>
					<el-menu-item index="1-1" @click="backLgoin()">退出登录</el-menu-item>
				</el-sub-menu>
			</el-menu>
		</section>
	</div>
</template>

<script>
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		updatePwd
	} from '@/utils/User'
	export default {
		data() {
			return {
				username: window.localStorage.getItem("userInfo"),
			};
		},
		methods: {
			//退出功能
			backLgoin() {
				if (this.$store.state.user.isLogin) {
					window.localStorage.removeItem("token")
					window.localStorage.removeItem("username")
					this.$store.commit("changeLogin", false)
				} else {
					ElMessage({
						message: '您还没有登录，请先登录',
						type: 'warning',
					})
				}
			},
			//弹出框
			updatePwd() {
				if (this.$store.state.user.isLogin) {
					ElMessageBox.prompt('请输入你的新密码', '修改密码', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							inputErrorMessage: '密码不能包含中文哦',
							inputType: 'password'
						})
						.then(({
							value
						}) => {
							updatePwd(value).then(res => {
								if (res.data.code == 200) {
									ElMessage({
										type: 'success',
										message: "修改成功，即将推退出登录",
									})
									this.backLgoin();
									setTimeout(() => {
										this.$router.push('/login')
									}, 2000)

								} else {
									ElMessage({
										type: 'success',
										message: "修改失败，后端繁忙",
									})
								}
							})
						})
						.catch(() => {
							ElMessage({
								type: 'info',
								message: '你还没有输入内容',
							})
						})
				} else {
					ElMessage({
						message: '您还没有登录，请先登录',
						type: 'warning',
					})
				}


			},
			handleSelect(key, keyPath) {
				console.log(key, keyPath)
			}
		}
	};
</script>

<style scoped>
	.el-menu-demo {
		margin: 0;
	}

	.headnav-box {
		width: 1280px;
		margin: 0 auto;
		display: flex;
	}

	.el-menu-item {
		font-size: 12px;
		padding: 0 10px;
		border-bottom: none !important;
	}

	.el-menu {
		width: 500px;
		border: none;
		height: 40px;
		border-bottom: none !important;
	}

	.headnav-box {
		display: flex;
		background: #333;
	}

	.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
	.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
		background: #333;
		color: #ffffff;
	}

	.el-menu--horizontal>.el-menu-item.is-active {
		color: #ffffff !important;
		border-bottom: none;
	}

	.el-menu--horizontal .el-menu .el-menu-item.is-active,
	.el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title {
		color: #a4b0b0 !important;
	}
</style>
